<template>
  <view class="consultation-container">
    <!-- 搜索框 -->
    <view class="search-box">
      <view class="search-input">
        <input 
          type="text" 
          v-model="searchKeyword"
          placeholder="请输入医生姓名" 
          confirm-type="search"
          @input="handleSearch"
        />
        <text 
          class="clear-icon" 
          v-if="searchKeyword" 
          @tap="clearSearch"
        ></text>
      </view>
    </view>

    <!-- 医生列表 -->
    <view class="doctor-list">
      <view 
        class="doctor-item" 
        v-for="(doctor, index) in filteredDoctors" 
        :key="index" 
        @tap="goToDoctorDetail(doctor)"
        :class="{'no-border': index === filteredDoctors.length - 1}"
      >
        <view class="doctor-info">
          <view class="avatar-wrapper">
            <image 
              class="doctor-avatar" 
              :src="doctor.appDoctor.imgUrl || defaultAvatar" 
              mode="aspectFill"
            ></image>
            <view class="online-status"></view>
          </view>
          <view class="doctor-detail">
            <view class="name-title">
              <text class="doctor-name">{{doctor.appDoctor.name}}</text>
              <view class="title-tag">{{doctor.appDoctor.title || '主治医师'}}</view>
            </view>
            <view class="department">
              <text>{{doctor.appBigdep.name}}</text>
              <text class="separator">|</text>
              <text>{{doctor.appHospital.name}}</text>
            </view>
            <view class="tags">
              <text class="tag">专业认证</text>
              <text class="tag">及时回复</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { doctorApi } from '@/api/doctor'

export default {
  data() {
    return {
      doctors: [],
      defaultAvatar: '/static/img/default-avatar.png',
      searchKeyword: '',
      filteredDoctors: [] // 用于存储搜索过滤后的医生列表
    }
  },
  
  onLoad() {
    this.loadDoctors()
  },
  
  methods: {
    async loadDoctors() {
      try {
        const res = await doctorApi.getDoctorList()
        this.doctors = res.data
        this.filteredDoctors = res.data
        console.log('Doctors loaded:', this.doctors)
      } catch (error) {
        console.error('Failed to load doctors:', error)
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
      }
    },
    
    goToDoctorDetail(doctor) {
      // 将医生信息转换为查询字符串
      const doctorInfo = {
        id: doctor.appDoctor.id,
        name: doctor.appDoctor.name,
        title: doctor.appDoctor.title || '主治医师',
        imgUrl: doctor.appDoctor.imgUrl || this.defaultAvatar,
        price: doctor.appDoctor.price || 100,
        department: doctor.appBigdep.name,
        hospital: doctor.appHospital.name
      }
      
      uni.navigateTo({
        url: `/pages/doctor/doctor?doctorInfo=${encodeURIComponent(JSON.stringify(doctorInfo))}`
      })
    },

    handleSearch() {
      if (!this.searchKeyword.trim()) {
        this.filteredDoctors = this.doctors;
        return;
      }
      
      const keyword = this.searchKeyword.toLowerCase().trim();
      this.filteredDoctors = this.doctors.filter(doctor => {
        const doctorName = doctor.appDoctor.name.toLowerCase();
        return doctorName.includes(keyword);
      });
    },

    clearSearch() {
      this.searchKeyword = '';
      this.filteredDoctors = this.doctors;
    }
  }
}
</script>

<style lang="scss">
.consultation-container {
  min-height: 100vh;
  background: linear-gradient(to bottom, #f0f2f5, #ffffff);
  
  .search-box {
    padding: 30rpx;
    
    .search-input {
      background: #ffffff;
      border-radius: 20rpx;
      padding: 24rpx 30rpx;
      display: flex;
      align-items: center;
      box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;
      
      &:focus-within {
        transform: translateY(-2rpx);
        box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.08);
      }
      
      input {
        flex: 1;
        font-size: 28rpx;
        color: #333;
        
        &::placeholder {
          color: #999;
          font-size: 26rpx;
        }
      }
      
      .clear-icon {
        font-size: 32rpx;
        color: #999;
        padding: 10rpx;
        margin-left: 10rpx;
        transition: all 0.3s ease;
        
        &:active {
          transform: scale(0.9);
        }
      }
    }
  }
  
  .doctor-list {
    padding: 0 30rpx 30rpx;
    
    .doctor-item {
      background: #ffffff;
      border-radius: 24rpx;
      padding: 30rpx;
      margin-bottom: 24rpx;
      display: flex;
      align-items: center;
      box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;
      
      &:active {
        transform: scale(0.98);
        background: #fafafa;
      }
      
      .doctor-info {
        display: flex;
        align-items: center;
        flex: 1;
        
        .avatar-wrapper {
          position: relative;
          margin-right: 24rpx;
          
          .doctor-avatar {
            width: 120rpx;
            height: 120rpx;
            border-radius: 60rpx;
            background: #f0f0f0;
            border: 4rpx solid #ffffff;
            box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
          }
          
          .online-status {
            position: absolute;
            right: 4rpx;
            bottom: 4rpx;
            width: 20rpx;
            height: 20rpx;
            border-radius: 50%;
            background: #00C190;
            border: 3rpx solid #fff;
            box-shadow: 0 2rpx 8rpx rgba(0, 193, 144, 0.3);
          }
        }
        
        .doctor-detail {
          flex: 1;
          
          .name-title {
            display: flex;
            align-items: center;
            margin-bottom: 16rpx;
            
            .doctor-name {
              font-size: 34rpx;
              color: #333;
              font-weight: 600;
              margin-right: 16rpx;
            }
            
            .title-tag {
              font-size: 22rpx;
              color: #00C190;
              background: rgba(0, 193, 144, 0.1);
              padding: 6rpx 16rpx;
              border-radius: 6rpx;
              font-weight: 500;
            }
          }
          
          .department {
            font-size: 26rpx;
            color: #666;
            margin-bottom: 16rpx;
            
            .separator {
              margin: 0 12rpx;
              color: #ddd;
            }
          }
          
          .tags {
            display: flex;
            flex-wrap: wrap;
            gap: 12rpx;
            
            .tag {
              font-size: 22rpx;
              color: #666;
              background: #f7f8fa;
              padding: 6rpx 16rpx;
              border-radius: 6rpx;
              border: 1rpx solid #eee;
              transition: all 0.3s ease;
              
              &:hover {
                background: #f0f0f0;
                border-color: #ddd;
              }
            }
          }
        }
      }
    }
  }
}
</style> 